import React, {FC, useEffect} from 'react';
import {Checkbox, Form, Input, Select} from "antd";
import {QuestionTitlePropsType} from "./interface";

const PropComponent: FC<QuestionTitlePropsType> = (props: QuestionTitlePropsType) => {
  const {text = '', level = 1, isCenter = false, onChange, disabled} = props
  const [form] = Form.useForm()
  useEffect(() => {
    form.setFieldsValue({text, level, isCenter})
  }, [text, level, isCenter]);

  function handleChange() {
    console.log('form.getFieldsValue()', form.getFieldsValue())
    if (!onChange) return
    onChange(form.getFieldsValue())
  }

  return (
    <Form layout={'vertical'} initialValues={{text, level, isCenter}}
          disabled={disabled}
          form={form} onValuesChange={handleChange}>
      <Form.Item label={'标题内容'} name={'text'} rules={[{required: true, message: '请输入标题内容'}]}>
        <Input placeholder={'请输入内容'}/>
      </Form.Item>
      <Form.Item label={'层级'} name={'level'}>
        <Select options={[
          {value: 1, text: 1},
          {value: 2, text: 2},
          {value: 3, text: 3},
        ]}>
        </Select>
      </Form.Item>
      <Form.Item label={'居中'} name={'isCenter'} valuePropName={'checked'}>
        <Checkbox>居中显示</Checkbox>
      </Form.Item>
    </Form>
  );
};

export default PropComponent;
